import React from 'react';
import {Router, Route, Link} from 'react-router';

import utils from '../../js/utils';
import config from '../../../config/config';


class Index extends React.Component {
  constructor () {
    super();

    this.state = {
      reid: 0,
      list: [],
      channel: [
        {
          "name": "文章",
          "color": "#20D097"
        },
        {
          "name": "图集",
          "color": "#e44b51"
        },
        {
          "name": "视频",
          "color": "#4a90e2"
        },
        {
          "name": "音频",
          "color": "#FFBD00"
        },
        {
          "name": "词库",
          "color": "#797ff3"
        },
        {
          "name": "题库",
          "color": "#44b549"
        }
      ],

      delete_typename: '',
      delete_typeid: 0,
      delete_ele: null,

      sub_list: {}
    }

    this.deleteColumn = this.deleteColumn.bind(this);
    this.confrimDeleteColumn = this.confrimDeleteColumn.bind(this);
    this.closeDeleteColumn = this.closeDeleteColumn.bind(this);

    this.showSubColumn = this.showSubColumn.bind(this);
  }

  componentDidMount () {

    let _this = this;
    utils.post("/get_column_list", {reid: this.state.reid}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.setState({
          list: res.list
        })
      }
    })
  }

  deleteColumn (e) {
    let ele = e.target || e.srcElement;
    let typeid = ele.getAttribute('data-typeid');
    let typename = ele.getAttribute('data-typename');

    this.setState({
      delete_typeid: typeid,
      delete_typename: typename,
      delete_ele: ele
    })

    $('.bamboo-column-delete').show();
  }

  confrimDeleteColumn (e) {
    let ele = e.target || e.srcElement;
    let typeid = ele.getAttribute('data-typeid');

    let delete_name = this.refs.delete_name.value;
    if (!utils.checkValue(delete_name)) {
      $(ele).prev('p').text("分类名称不能为空").show();
      return
    }

    if (delete_name != this.state.delete_typename) {
      $(ele).prev('p').text("您输入的分类名称有误").show();
      return
    }

    $(ele).prev('p').text("").hide();

    let _this = this;
    utils.post("/delete_arctype_from_typeid", {typeid}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        $(_this.state.delete_ele).parent('div').parent('div').remove();
        $('.bamboo-column-delete').hide();
        _this.refs.delete_name.value = "";
        return
      }

      $(ele).prev('p').text(res.errmsg).show();
    })
  }

  closeDeleteColumn (e) {
    let ele = e.target || e.srcElement;
    $('.bamboo-column-delete').hide();
    $(ele).next('div').children('p').text("").hide();
    this.refs.delete_name.value = "";
  }

  showSubColumn (e) {
    let ele = e.target || e.srcElement;
    let typeid = ele.getAttribute('data-typeid');
    let status = ele.getAttribute('data-status');

    if (parseInt(typeid, 10) == 0) {
      return
    }

    let _this = this;
    if (parseInt(status, 10) == 0) {
      $(ele).attr("src", "/static/icon/cc-jian.png")
      $(ele).attr('data-status', 1);

      utils.post("/get_column_list", {reid: typeid}, function (res) {
        console.log("sub_list", res);
        if (parseInt(res.code, 10) == 200) {
          let sub_list = _this.state.sub_list;
          sub_list["typeid" + typeid] = res.list;
          _this.setState({
            sub_list: sub_list
          })
        }
      })
    }
    else {
      $(ele).attr("src", "/static/icon/cc-plus-square.png")
      $(ele).attr('data-status', 0);
      let sub_list = _this.state.sub_list;
      sub_list["typeid" + typeid] = [];
      _this.setState({
        sub_list: sub_list
      })
    }
  }

  render () {
    let channel = this.state.channel;
    let deleteColumn = this.deleteColumn;
    let showSubColumn = this.showSubColumn;
    let sub_list = this.state.sub_list;
    return (
      <div>
        <div className='bamboo-nav'>当前位置：作品管理</div>
        <div className='bamboo-column-delete'>
          <div onClick={this.closeDeleteColumn}></div>
          <div>
            <h3>删除栏目操作（{this.state.delete_typename}）</h3>
            <input type="text" placeholder="请输入需要删除的分类名称" className="form-control" ref="delete_name"/>
            <p></p>
            <a href="javascript:void(0)" className='bamboo-btn-red' data-typeid={this.state.delete_typeid} onClick={this.confrimDeleteColumn}>删除</a>
          </div>
        </div>
        <div className='bamboo-content' style={{minHeight: (window.innerHeight - 75 - 65) + 'px'}}>
          <div className='bamboo-column-list' style={{border: this.state.list.length == 0 ? "none" : "solid 1px #f6f8f9"}}>
            {
              this.state.list.length == 0 ? <div className='bamboo-empty'><img src="/static/icon/empty.png" /><p>暂无内容，<Link to="/column/new/0">前往新增分类</Link></p></div> : this.state.list.map(function (item, idx) {
                return <div key={idx}>
                  <div>
                    <div>
                      <a href="javascript:void(0)"><img data-typeid={item.typeid} data-status="0" onClick={showSubColumn} className='o-plus-icon' src="/static/icon/cc-plus-square.png" /></a>
                      <Link style={{marginLeft: "1rem"}} to={"/content/articles/" + item.channel + "/" + item.typeid}>{item.typename}</Link>
                    </div>
                    <div className="bamboo-content-control">
                      <Link title="查看分类内容" to={"/content/articles/" + item.channel + "/" + item.typeid}></Link>
                      <Link title="添加子分类" to={"/column/sub/" + item.channel + "/" + item.typeid}></Link>
                      <Link title="修改分类" to={"/column/modify/" + item.channel + "/" + item.typeid}></Link>
                      <a title="删除分类" href="javascript:void(0)" data-typeid={item.typeid} data-typename={item.typename} onClick={deleteColumn}></a>
                    </div>
                  </div>
                  <aside className='bamboo-column-children'>
                    {
                      sub_list["typeid" + item.typeid] && sub_list["typeid" + item.typeid].map(function (it, ix) {
                        return <div key={ix}>
                          <div>
                            <div>
                              <Link style={{marginLeft: "2.5rem"}} to={"/content/articles/" + item.channel + "/" + it.typeid}>{it.typename}</Link>
                            </div>
                            <div className="bamboo-content-control">
                              <Link title="查看分类内容" to={"/content/articles/" + item.channel + "/" + it.typeid}></Link>
                              <Link title="添加子分类" style={{display: "none"}} to={"/column/sub/" + item.channel + "/" + item.typeid}></Link>
                              <Link title="修改分类" to={"/column/modify/" + it.channel + "/" + it.typeid}></Link>
                              <a title="删除分类" href="javascript:void(0)" data-typeid={it.typeid} data-typename={it.typename} onClick={deleteColumn}></a>
                            </div>
                          </div>
                        </div>
                      })
                    }
                  </aside>
                </div>
              })
            }
          </div>
          {
            this.state.list.length == 0 ? "" : <div className='bamboo-add-new'><p><Link to="/column/new/0"><img src="/static/icon/plus-hover.png" />新增分类</Link></p></div>
          }
        </div>
      </div>
    )
  }
}


class Content extends React.Component {
  constructor () {
    super();

    this.state = {
      router: '/content'
    }
  }

  componentDidMount () {

  }

  render () {
    return (
      <div>{this.props.children ? this.props.children : <Index/>}</div>
    )
  }
}

export default Content;
